<!-- 运输中检查 23 -->
<template>
	<view class="add-box">
		<view class="info shadow radius">
			<view class="info-label">
				<text>运输信息</text>
			</view>
			<view class="uni-flex">
				<view class="info-item">
					<text class="text">车牌号</text>
					<input class="input" type="text" disabled :value="param.vehCode" />
				</view>
				<view class="info-item">
					<text class="text">挂车牌号</text>
					<input class="input" type="text" disabled :value="param.trailerVehCode" />
				</view>
			</view>
			<view class="info-item">
				<text class="text">检查时间</text>
				<uni-datetime-picker class="date-select" type="datetime" :hide-second="true" v-model="info.datetime"
					placeholder="请选择检查始时间"></uni-datetime-picker>
			</view>
			<view class="info-item">
				<text class="text">天气情况</text>
				<select-weather class="input" placeholder="请选择天气情况" v-model="info.weather"></select-weather>
			</view>
			<view class="info-item">
				<text class="text">货物名称</text>
				<view class="input">
					<text>{{param.goodsInfo}}</text>
				</view>
			</view>
		</view>

		<view class="info shadow radius" v-for="items in listNoPage" :key="items.id">
			<view class="info-label">
				<text>{{items.checkPro}}</text>
			</view>
			<view class="info-item info-content">
				<text>{{items.checkContent}}</text>
			</view>
			<view class="info-item">
				<radio-group @change="(e)=>radioChange(e,items.id)" class="car-state-group">
					<view class="car-state-item" v-for="(item, index) in carState" :key="item.value">
						<label style="display: flex;align-items: center;">
							<radio :value="item.value" color="#FFD14A" :checked="index === info.carState[items.id]" />
							<text style="font-size: 30rpx;">{{item.name}}</text>
						</label>
					</view>
				</radio-group>
			</view>
		</view>

		<view class="info shadow radius">
			<textarea class="info-textarea" placeholder="请输入检查内容" v-model="info.logContent" />
		</view>
		<view class="info shadow radius">
			<view class="file-list clearfix">
				<view class="file-item" v-for="(item,index) in info.fileList">
					<image class="file-img" :src="item.temp" mode="aspectFit"></image>
					<view class="file-del" @click="fileDel(index)"></view>
				</view>
				<view class="file-item file-upload-btn" @click="selectFile"></view>
			</view>
		</view>

		<view class="add-btns">
			<view class="btn-cancel" @click="$goBack(1,1)">
				<text>取 消</text>
			</view>
			<view class="btn-submit" @click="submit">
				<text>确 认</text>
			</view>
		</view>
	</view>
</template>

<script>
	import selectWeather from '@/components/tool-select/select-weather.vue';
	export default {
		props: ['param'],
		components: {
			selectWeather
		},
		data() {
			return {
				listNoPage: [], // 检查项
				info: {
					logType: '23', // 运输中检查
					datetime: '',
					weather: "", // 天气
					carState: {}, // 车况
					logContent: "",
					fileList: [],
				},
				carState: [{
					name: '正常',
					value: '0'
				}, {
					name: '异常',
					value: '1'
				}, {
					name: '已检修',
					value: '2'
				}],
			};
		},
		methods: {
			radioChange(e, id) {
				this.info.carState[id] = e.detail.value;
			},
			selectFile() {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						// console.log(chooseImageRes)
						uni.uploadFile({
							url: 'data-dispatch/upload/toFileManager',
							filePath: chooseImageRes.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								const fileData = uploadFileRes.data ? JSON.parse(uploadFileRes
									.data) : ''
								if (fileData && fileData.code == 200) {
									// console.log(fileData.data)
									this.info.fileList.push({
										upload: fileData.data.path,
										temp: chooseImageRes.tempFilePaths[0]
									})
								}
							}
						});
					}
				});
			},
			fileDel(index) {
				this.info.fileList.splice(index, 1)
			},
			submit() {
				const formData = Object.assign(this.info, this.param);

				if (formData.weather == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择天气'
					})
					return false;
				}
				for (let item of this.listNoPage) {
					if (formData.carState[item.id] === undefined) {
						uni.showToast({
							icon: 'none',
							title: '请检查' + item.checkPro
						})
						return false;
					}
				}
				formData.picUrl = formData.fileList.map((item) => {
					return item.upload;
				}).join(',');
				formData.list = this.listNoPage.map((item, index) => {
					return {
						'checkdictId': item.dictId,
						'checkSource': '2',
						'checkDesc': item.checkContent,
						'checkPro': item.checkPro,
						'checkResult': formData.carState[item.id],
					}
				})
				// console.log(formData);
				this.$api.mgntvehrunlogSave(formData).then(res => {
					// console.log(res)
					uni.showToast({
						title: "已提交",
						success() {
							setTimeout(() => {
								let pages = getCurrentPages(); // 当前页面        
								let beforePage = pages[pages.length - 2]; // 上上一页 
								uni.navigateBack({
									success: () => {
										beforePage.$vm.busibillDatail();
									}
								});
							}, 1500); // showToast默认时间
						}
					})
				})
			}
		},
		mounted() {
			this.$nextTick(() => {
				// 默认检查时间为当前日期
				this.info.datetime = new Date();
			})
			this.$api.listNoPage({
				checkType: '23'
			}).then(res => {
				this.listNoPage = res.data.data;
			})
		},
	}
</script>

<style lang="scss" scoped>
	.add-box {

		.add-btns {
			text-align: center;
			padding: 40rpx 0;

			.btn-cancel,
			.btn-submit {

				display: inline-block;
				margin: 0 30rpx;
				border-radius: 50rpx;
				padding: 0 80rpx;
				font-size: 32rpx;
			}

			.btn-cancel {
				border: 2rpx solid #CCCCCC;
				line-height: 80rpx;
			}

			.btn-submit {
				line-height: 84rpx;
				background-color: $app-color;
			}
		}
	}

	.info {
		background-color: #fff;
		margin-bottom: 30rpx;

		.info-label {
			position: relative;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #dddddd;

			text {
				font-size: 32rpx;
			}

			&::after {
				content: "";
				position: absolute;
				left: -30rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 38rpx;
				background-color: $app-color;
			}
		}

		.info-item {
			display: flex;
			padding: 30rpx 0;
			border-bottom: 2rpx solid #dddddd;

			.text {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #666666;
				width: 4em;
				text-align: justify;
				text-align-last: justify;
			}

			.input {
				font-size: 30rpx;
				line-height: 40rpx;
				flex: 1;
				padding: 0 20rpx;
			}

			.city-select {
				flex: 1;
				padding: 0 20rpx;

				::v-deep .input-value-border {
					border: 0;
					line-height: 36rpx;
					height: 36rpx;
				}
			}

			.date-select {
				flex: 1;

				::v-deep .uni-date-x--border {
					border: 0;

					.uni-date-x {
						padding: 0 10rpx;
					}

					.uni-icons {
						display: none;
					}

					.uni-date__x-input {
						line-height: 36rpx;
						height: 36rpx;
					}

					.uni-input-input {
						font-size: 28rpx;
					}
				}
			}

		}

		>.info-item:last-child {
			border-bottom: 0;
		}

		.car-state-group {
			display: flex;

			.car-state-item:nth-child(1),
			.car-state-item:nth-child(2) {
				flex: 1;
			}
		}

		.info-content {
			font-size: 32rpx;
			line-height: 1.5em;
			padding: 1em 0;
			text-align: justify;
		}

		.info-textarea {
			width: 100%;
			font-size: 32rpx;
			line-height: 1.5em;
			height: 6em;
		}

		.file-list {
			.file-item {
				float: left;
				width: 22%;
				text-align: center;
				height: 20vw;
				line-height: 20vw;
				margin-right: calc(4%);
				position: relative;

				.file-img {
					max-width: 100%;
					max-height: 100%;
					vertical-align: middle;
				}

				.file-del {
					position: absolute;
					right: 0;
					top: 0;
					transform: translate(30%, -30%);
					border-radius: 50%;
					width: 0;
					height: 0;
					border: 20rpx solid #f00;

					&::after {
						content: "";
						width: 20rpx;
						display: block;
						transform: translate(-50%, -50%);
						background-color: #ffffff;
						height: 4rpx;
					}
				}

				&:nth-child(4n) {
					margin-right: 0;
				}

				&:nth-child(n+5) {
					margin-top: calc(4% / 3);
				}

			}

			.file-upload-btn {
				box-sizing: border-box;
				border: 1rpx solid #ddd;
				background: url('@/static/image/camera.png') no-repeat center;
				background-size: 70%;
			}
		}
	}
</style>
